<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElAvatar, ElTooltip } from 'element-plus';
import { Decoration5, Decoration8 } from '@kjgl77/datav-vue3';
import { useNow, useDateFormat } from '@vueuse/core';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore, useUserStore } from '@/stores';
import { clearToken } from '@/utils/auth';
import defaultAvatar from '../../assets/images/img/默认头像.png';
import PersonalCenterIndex from '../module-personal-center/index.vue';
import { launchStartInit } from './launch';
import { launchMenus } from './launchTab.js';

const router = useRouter();
const userStore = useUserStore();
const systemStore = useSystemStore();

const menuTabChecked = ref();
const menuItemChecked = ref();
const menuList = ref([]);
const flag = ref(false);

const avatarURL = computed(() => {
  return !userStore?.userInfo?.avatar ? defaultAvatar : userStore?.userInfo?.avatar;
});

onMounted(() => {
  launchStartInit();
  hasPermission();
});

// 权限处理
const hasPermission = () => {
  menuList.value = launchMenus
    .map((item) => {
      if (userStore.businessMap[item?.menuTitle]) {
        return item;
      }
    })
    .filter((value) => value !== undefined);

  menuTabChecked.value = menuList.value[0];
  menuItemChecked.value = menuList.value[0].menuTabItems?.length
    ? menuList.value[0].menuTabItems[0]
    : menuList.value[0];
  flag.value = true;
};

// 路由跳转
const goTo = (val) => {
  clearToken();
  router.replace(val);
};

// 使用hooks获取实时时间
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');

const handleBaseSystem = () => {
  router.replace('/base-menu');
};

const handleMenu = (item) => {
  flag.value = false;

  menuTabChecked.value = item;

  if (item?.menuTabItems?.length) {
    menuItemChecked.value = item.menuTabItems[0];
  } else {
    menuItemChecked.value = item;
  }

  setTimeout(() => {
    flag.value = true;
  }, 100);
};

const handleMenuTab = (item) => {
  flag.value = false;

  menuItemChecked.value = item;
  setTimeout(() => {
    flag.value = true;
  }, 100);
};

const handlePersonalCenter = () => {
  systemStore.SET_PERSONAL_SHOW(true);
};

const handleMenuTabRoute = (item) => {
  router.replace(item?.menuPath);
};
</script>
<template>
  <div class="launch-root">
    <div class="landscape"></div>
    <div class="filter"></div>
    <canvas id="canvas"></canvas>

    <div class="launch-box p-20px text-#fff">
      <div class="launch-top flex items-center justify-between">
        <div class="relative">
          <p class="timer absolute left-70px top--38px">{{ formatted }}</p>
          <Decoration8
            style="width: 39rem; height: 50px"
            :color="['rgba(101, 218, 251, 1)', 'rgba(101, 218, 251, 1)']"
          />
        </div>
        <div class="text-title text-center text-40px">
          <p data-text="林业综合管理平台">林业综合管理平台</p>
          <Decoration5
            style="width: 52rem; height: 40px"
            :color="['rgba(101, 218, 251, 1)', 'rgba(168, 239, 255, 1)']"
          />
        </div>
        <div class="relative">
          <div class="absolute right-70px top--20px flex justify-end">
            <ElTooltip :content="'系统管理'" placement="bottom">
              <SvgIconIndex
                icon-class="system"
                size="40px"
                class="cursor-pointer"
                title="系统管理"
                color="#65dafb"
                @click="handleBaseSystem"
              />
            </ElTooltip>
            <ElTooltip :content="'系统退出'" placement="bottom">
              <SvgIconIndex
                icon-class="exit"
                size="35px"
                class="ml-20px mr-20px cursor-pointer"
                title="系统退出"
                color="#65dafb"
                @click="goTo('/login')"
              />
            </ElTooltip>
            <ElTooltip :content="userStore?.userInfo?.username" placement="bottom">
              <ElAvatar
                :size="35"
                :src="avatarURL"
                @click="
                  () => {
                    handlePersonalCenter();
                  }
                "
              />
            </ElTooltip>
          </div>
          <Decoration8
            :reverse="true"
            style="width: 39rem; height: 50px"
            :color="['rgba(101, 218, 251, 1)', 'rgba(101, 218, 251, 1)']"
          />
        </div>
      </div>
      <div class="launch-tab text_center flex items-center justify-between">
        <div v-for="(item, index) in menuList" :key="index" @click="handleMenu(item)">
          <div class="launch-tab-name" :class="{ active: menuTabChecked?.menuTitle === item?.menuTitle }">
            {{ item.menuTitle }}
          </div>
        </div>
      </div>
      <div v-if="menuTabChecked?.menuTabItems?.length" class="grid-ul flex items-center justify-around">
        <div
          v-for="(item, index) in menuTabChecked?.menuTabItems"
          :key="index"
          :class="{ active: menuItemChecked?.menuTitle === item?.menuTitle }"
          @click="handleMenuTab(item)"
        >
          <div class="grid-li">
            {{ item.menuTitle }}
          </div>
        </div>
      </div>

      <Transition
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutDown"
      >
        <div v-if="flag" class="topic-box flex items-center justify-around">
          <div
            v-for="(item, index) in menuItemChecked?.menuItems"
            :key="index"
            class="topic-card"
            @click="handleMenuTabRoute(item)"
          >
            <div class="inside">
              <p>{{ item?.menuTitle }}</p>
              <span>{{ item?.subtitle }}</span>
            </div>
          </div>
        </div>
      </Transition>
    </div>

    <!-- 个人中心 -->
    <PersonalCenterIndex />
  </div>
</template>

<style scoped lang="scss">
.launch-root {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: black;
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
  cursor: pointer;
  .filter {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #fe5757;
    mix-blend-mode: overlay;
    animation: colorChange 30s ease-in-out infinite;
    animation-fill-mode: both;
  }
  @keyframes colorChange {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 0.9;
    }
  }
  .landscape {
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/xkbg.png');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: 1000px 250px;
  }

  .launch-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 30px;

    .launch-top {
      letter-spacing: normal;

      .text-title {
        p {
          position: relative;
          display: inline-block;
          margin: auto;
          color: transparent;
          font-size: 5rem;
          font-family: $font-family-CN-WenDao;
          line-height: 1;
          letter-spacing: 14px;
          white-space: nowrap;
          word-spacing: 0.2em;
          background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
          background-size: cover;
          background-clip: text;
        }
        p::after {
          content: attr(data-text);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(
            120deg,
            transparent 0%,
            transparent 6rem,
            white 11rem,
            transparent 11.15rem,
            transparent 15rem,
            rgba(255, 255, 255, 0.3) 20rem,
            transparent 25rem,
            transparent 27rem,
            rgba(255, 255, 255, 0.6) 32rem,
            white 33rem,
            rgba(255, 255, 255, 0.3) 33.15rem,
            transparent 38rem,
            transparent 40rem,
            rgba(255, 255, 255, 0.3) 45rem,
            transparent 50rem,
            transparent 100%
          );
          background-repeat: no-repeat;
          background-size: 150% 100%;
          background-clip: text;
          animation: shine 5s infinite linear;
        }

        @keyframes shine {
          0% {
            background-position: 50% 0;
          }
          100% {
            background-position: -190% 0;
          }
        }
      }

      .timer {
        font-family: electronicFont;
        font-style: normal;
        background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
        background-size: cover;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .launch-tab {
      margin: 0 auto;
      margin-top: 85px;
      .launch-tab-name {
        position: relative;
        font-size: 20px;
        font-family: $font-family-CN-Normal;

        &:hover {
          color: #3fffdd;
          font-weight: 600;
          font-size: 30px;
        }
        &::before {
          content: '';
          position: absolute;
          right: 0;
          bottom: -10px;
          left: 0;
          height: 2px;
          background-color: #3cefff;
          transform: scaleX(0);
          transform-origin: bottom right;
          transition: transform 0.5s ease;
        }
        &:hover::before {
          transform: scaleX(1);
          transform-origin: bottom left;
        }
      }

      .active {
        position: relative;
        color: #3fffdd;
        font-weight: 600;
        font-size: 30px;
        text-shadow: 0 0 36px rgb(96, 254, 225), 0 0 16px rgba(0, 102, 255, 0.5), 0 0 10px rgba(80, 171, 25, 0.5);
      }
    }

    .grid-ul {
      display: flex;
      flex-direction: row;
      width: 1800px;
      height: 66px;
      margin: 5px auto 0;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 10px;

      .grid-li {
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 3px;
        &:hover {
          color: #3fffdd;
        }
      }

      .active {
        color: #3fffdd;
      }
    }

    .topic-box {
      position: fixed;
      bottom: 295px;
      left: 132px;
      width: 1880px;
      padding: 70px;
      .topic-card {
        position: relative;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
        width: 550px;
        background-color: rgba(0, 255, 195, 0.1);
        border-radius: 10px;
        cursor: pointer;
        aspect-ratio: 2.718;

        &::before {
          content: '';
          z-index: 1;
          box-shadow: rgba(0, 0, 0, 0.9) 0px 10px 20px -5px;
          inset: 0;
        }
        &::after {
          z-index: 0;
          background: inherit;
          inset: -10px;
          scale: 0.8;
        }
        .inside {
          content: '';
          position: absolute;
          z-index: 2;
          display: flex;
          flex-direction: column;
          grid-row: 1 / -1;
          grid-column: 1 / -1;
          align-items: flex-end;
          justify-content: center;
          padding-right: 45px;
          overflow: hidden;
          border-radius: inherit;
          inset: 1px;
          span {
            font-size: 18px;
          }
          &::after {
            content: '';
            position: absolute;
            mix-blend-mode: overlay;
            inset: 0;
          }
        }
      }
    }

    .text_center {
      width: 1800px;
      padding: 30px;
      border: 4px solid;
      border-image: conic-gradient(
          from var(--angle),
          rgba(168, 239, 255, 0.1),
          rgba(168, 239, 255, 1) 0.1turn,
          rgba(168, 239, 255, 1) 0.15turn,
          rgba(168, 239, 255, 0.1) 0.25turn
        )
        20;
      animation: borderRotate 2500ms linear infinite forwards;
    }

    @keyframes borderRotate {
      100% {
        --angle: 420deg;
      }
    }
  }
}
</style>
